<template>
	<view class="privilege-detail">
		<view class="lucky-detail-specific">
			<view class="lottery-situation">
				<view v-for="(item,index) in proceedTypeList" :key="index">
					<text>{{item.value}}</text>
					<text>{{item.name}}</text>
				</view>
				<view class="line"></view>
			</view>
			<view>
				不放过每一次获取幸运的机会
			</view>
		</view>
		<view class="privilege-detail-msg">
			<view>
				<view class="earn-expend">
					<view :class="lotteryResultIndex == index?'lottery-active':''" v-for="(item,index) in proceedType" :key="index" @click="chooseResult(index)">
						{{item}}
					</view>
				</view>
			</view>
			<!-- 进行中 -->
			<view class="privilege-detail-specific" v-if="lotteryResultIndex == 0">
				<scroll-view scroll-y="true" v-if="list.length>=10" :style="'height:1245px'" @scrolltolower="loadingMore">
					<view class="privilege-detail-message" v-for="(item,index) in list" :key="index">
						<view @click="toDetail(item)">
							<image :src="item.image"></image>
						</view>
						<view class="privilege-detail-right">
							<view class="privilege-detail-title" @click="toDetail(item)">
								{{item.title}}
							</view>
							<view class="privilege-detail-price" @click="toDetail(item)">
								实付：<text>￥{{item.pay_price}}</text>
							</view>
							<view class="privilege-detail-condition">
								<view v-if="item.order_status==2">
									进行中
								</view>
								<view v-if="item.order_status==5" style="color:#FF3C00;">
									取消中
								</view>
								<view v-if="item.order_status==6" style="color:#666;">
									取消失败
								</view>
								<view class="apply-off" @click="applyOff(item.id)" v-if="item.order_status==2">
									申请取消
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="privilege-detail-message" v-for="(item,index) in list" :key="index" v-else>
					<view @click="toDetail(item)">
						<image :src="item.image"></image>
					</view>
					<view class="privilege-detail-right">
						<view class="privilege-detail-title" @click="toDetail(item)">
							{{item.title}}
						</view>
						<view class="privilege-detail-price" @click="toDetail(item)">
							实付：<text>￥{{item.pay_price}}</text>
						</view>
						<view class="privilege-detail-condition">
							<view v-if="item.order_status==2">
								进行中
							</view>
							<view v-if="item.order_status==5" style="color:#FF3C00;">
								取消中
							</view>
							<view v-if="item.order_status==6" style="color:#666;">
								取消失败
							</view>
							<view class="apply-off" @click="applyOff(item.id)" v-if="item.order_status==2">
								申请取消
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 已完成 -->
			<view class="privilege-detail-specific" v-else-if="lotteryResultIndex == 1">
				<scroll-view scroll-y="true" v-if="list.length>=10" :style="'height:1245px'" @scrolltolower="loadingMore">
					<view class="privilege-detail-message" v-for="(item,index) in list" :key="index" @click="toDetail(item)">
						<view>
							<image :src="item.image"></image>
						</view>
						<view class="privilege-detail-right">
							<view class="privilege-detail-title">
								{{item.title}}
							</view>
							<view class="privilege-detail-condition" style="margin-top: 54upx;">
								<view style="color: #666666;">
									已完成
								</view>
								<view class="privilege-detail-price">
									实付：<text>￥{{item.pay_price}}</text>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="privilege-detail-message" v-for="(item,index) in list" :key="index" v-else @click="toDetail(item)">
					<view>
						<image :src="item.image"></image>
					</view>
					<view class="privilege-detail-right">
						<view class="privilege-detail-title">
							{{item.title}}
						</view>
						<view class="privilege-detail-condition" style="margin-top: 54upx;">
							<view style="color: #666666;">
								已完成
							</view>
							<view class="privilege-detail-price">
								实付：<text>￥{{item.pay_price}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 已取消 -->
			<view class="privilege-detail-specific" v-else>
				<scroll-view scroll-y="true" v-if="list.length>=10" :style="'height:1245px'" @scrolltolower="loadingMore">
					<view class="privilege-detail-message" v-for="(item,index) in list" :key="index" @click="toDetail(item)">
						<view>
							<image :src="item.image"></image>
						</view>
						<view class="privilege-detail-right">
							<view class="privilege-detail-title">
								{{item.title}}
							</view>
							<view class="canceled">
								已取消
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="privilege-detail-message" v-for="(item,index) in list" :key="index" v-else @click="toDetail(item)">
					<view>
						<image :src="item.image"></image>
					</view>
					<view class="privilege-detail-right">
						<view class="privilege-detail-title">
							{{item.title}}
						</view>
						<view class="canceled">
							已取消
						</view>
					</view>
				</view>
			</view>
		</view>
		<ending v-if="page>last_page||page==1"></ending>
		<uni-popup ref="popupDelete" :custom="true">
			<view class="popup_box_de">
				<view class="popup_top_de">
					<view class="popup_title_de">真的要取消该活动吗？</view>
				</view>
				<!-- 用户操作按钮 -->
				<view class="checkDeBtns">
					<view class="cancleDeBtn" @click="sureCancel">确定</view>
					<view class="sureDeBtn" @click="notCancel">再考虑</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import ending from '../../../common/ending.vue'
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	export default{
		components:{ending,uniPopup},
		data(){
			return{
				token: this.$store.getters.getToken,
				proceedTypeList:[
					{name:'进行中',value:'0'},
					{name:'已完成',value:'0'},
					{name:'已取消',value:'0'}
				],
				proceedType:['进行中','已完成','已取消'],
				lotteryResultIndex: 0,
				png1: this.$imgUrl+'img/1.png',
				list: [],
				page: 1,
				last_page: 1,
				cancelId: 0//申请取消的订单id
			}
		},
		onLoad(options) {
			this.lotteryResultIndex = options.index
			this.getData()
		},
		methods:{
			// 获取我的特权活动
			getData() {
				this.page = 1
				this.list = []
				let data = {
					page:this.page,
					token: this.token,
					type: parseInt(this.lotteryResultIndex)+1//(1:进行中,2:已完成,3:已取消)
				}
				this.$api.myPriviActLog(data).then(res =>{
					if(res.status) {
						this.proceedTypeList[0].value = res.info.processing
						this.proceedTypeList[1].value = res.info.completed
						this.proceedTypeList[2].value = res.info.canceled
						
						this.list = res.data.data
						this.last_page = res.data.last_page
					}
					console.log('获取我的特权活动',res)
				}).catch(err =>{
					console.log('获取我的特权活动',err)
				})
			},
			loadingMore() {
				this.page = this.page+1
				if(this.page>this.last_page) {
					uni.showToast({
						title: '没有更多了!',
						icon: 'none',
						duration: 2000
					})
					return false
				}else {
					let data = {
						page:this.page,
						token: this.token,
						type: parseInt(this.lotteryResultIndex)+1//(1:进行中,2:已完成,3:已取消)
					}
					this.$api.myPriviActLog(data).then(res =>{
						if(res.status) {
							this.list = this.list.concat(res.data.data)
							this.last_page = res.data.last_page
						}
						console.log('获取我的特权活动',res)
					}).catch(err =>{
						console.log('获取我的特权活动',err)
					})
				}
			},
			chooseResult(index){
				this.lotteryResultIndex = index
				this.getData()
			},
			// 申请取消活动
			applyOff(id) {
				this.cancelId = id
				this.$refs.popupDelete.open()
			},
			// 确定取消活动
			sureCancel() {
				console.log('确定取消活动')
				let data = {
					token: this.token,
					id: this.cancelId
				}
				this.$api.applyForCancellation(data).then(res =>{
					console.log('取消订单',res)
					uni.showToast({
						title: res.msg,
						icon: 'none',
						duration: 2000
					})
					setTimeout(()=>{
						this.$refs.popupDelete.close()
						this.getData()
					},1000)
				}).catch(err=>{
					console.log('取消订单',err)
				})
			},
			// 不取消活动
			notCancel() {
				console.log('不取消活动')
				this.$refs.popupDelete.close()
				this.cancelId=0
			},
			// 去详情页
			toDetail(item) {
				if(item.order_status==3) {//已完成
					uni.navigateTo({
						url: '../../welfare/buySucceed/buySucceed?order_id='+item.id+'&id='+item.activity_id
					})
				}else {
					if(item.is_cha==1) {//为1可以查看详情
						uni.navigateTo({
							url: '../../welfare/welfareDetails/welfareDetails?id='+item.activity_id
						})
					}else {
						uni.showToast({
							title: '该活动已下架',
							icon: 'none',
							duration: 2000
						})
					}
				}
			}
		}
	}
</script>

<style>
	.popup_box_de {
		width: 640upx;
		height: 336upx;
		border-radius: 24upx;
		background-color: #fff;
		font-size: 34upx;
	}
	.popup_top_de {
		width: 100%;
		height: 224upx;
		box-sizing: border-box;
		padding: 88upx 150upx;
		border-bottom: 1upx solid rgba(0, 0, 0, 0.1);
	}
	
	.popup_title_de {
		color: #353535;
		text-align: center;
		font-weight: 550;
	}
	.checkDeBtns {
		height: 112upx;
		display: flex;
		color: #666;
	}
	
	.sureDeBtn {
		width: 50%;
		height: 100%;
		color: #00A66A;
		text-align: center;
		line-height: 112upx;
		font-weight: 550;
	}
	
	.cancleDeBtn {
		width: 50%;
		height: 100%;
		text-align: center;
		line-height: 112upx;
		border-right: 1upx solid rgba(0, 0, 0, 0.1);
	}
	page{
		background-color: #F5F6F9;
	}
	.privilege-detail{
		width: 100%;
		height: 100%;
		background: #F5F6F9;
	}
	.lucky-detail-specific{
		width: 100%;
		height: 268upx;
		background: #FFFFFF;
		padding: 0 30upx;
		box-sizing: border-box;
		position: relative;
	}
	.lottery-situation{
		display: flex;
		justify-content: space-between;
		padding-top: 58upx;
		box-sizing: border-box;
	}
	.lottery-situation>view:first-child{
		padding: 0 76upx 0 48upx;
		box-sizing: border-box;
		text-align: center;
	}
	.lottery-situation>view:nth-child(3){
		padding: 0 46upx 0 76upx;
		box-sizing: border-box;
		text-align: center;
	}
	.lottery-situation>view:nth-child(2){
		padding: 0 76upx;
		box-sizing: border-box;
		text-align: center;
	}
	.lottery-situation>view>text{
		display: block;
	}
	.lottery-situation>view>text:first-child{
		color: #333333;
		font-size: 36upx;
		line-height: 50upx;
		font-weight: 550;
	}
	.lottery-situation>view>text:last-child{
		color: #999999;
		font-size: 24upx;
	}
	.line{
		width: 2upx;
		height: 46upx;
		border-left: 1px solid #EFEFEF;
		position: absolute;
		top: 78upx;left: 250upx;
	}
	.line::before{
		position: absolute;
		content: '';
		width: 2upx;
		height: 46upx;
		border-left: 1px solid #EFEFEF;
		left: 248upx;
	}
	.lucky-detail-specific>view:last-child{
		width: 100%;
		height: 48upx;
		line-height: 48upx;
		text-align: center;
		background: #F2F2F2;
		border-radius: 25upx;
		font-size: 24upx;
		color: #333333;
		margin-top: 48upx;
	}
	.privilege-detail-msg{
		width: 100%;
		background: #FFFFFF;
		margin-top: 20upx;
		padding: 0 30upx;
		box-sizing: border-box;
	}
	.privilege-detail-msg>view:first-child{
		padding: 30upx 0;
		box-sizing: border-box;
	}
	.earn-expend{
		width: 100%;
		height: 64upx;
		border-radius: 34upx;
		display: flex;
		justify-content: space-between;
		background: #EFEFEF;
		color: #666666;
		text-align: center;
		font-size: 28upx;
		line-height: 64upx;
	}
	.earn-expend>view{
		width: 344upx;
	}
	.earn-expend .lottery-active{
		background: linear-gradient(to right,#4CCB31,#00B574);
		border-radius: 34upx;
		color: #FFFFFF;
	}
	.privilege-detail-message{
		width: 100%;
		padding: 30upx 0;
		box-sizing: border-box;
		display: flex;
		border-top: 1upx solid #DEDEDE;
	}
	.privilege-detail-message image{
		width: 240upx;
		height: 180upx;
	}
	.privilege-detail-right{
		margin-left: 20upx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.privilege-detail-title{
		width: 430upx;
		height: 84upx;
		color: #333333;
		font-size: 30upx;
		font-weight: 550;
	}
	.privilege-detail-price{
		color: #666666;
		font-size: 28upx;
		text-align: right;
	}
	.privilege-detail-price>text{
		color: #FF3C00;
		font-size: 32upx;
		font-weight: 550;
	}
	.privilege-detail-condition{
		display: flex;
		justify-content: space-between;
		margin-top: 6upx;
	}
	.privilege-detail-condition>view:first-child{
		color: #00A66A;
		font-size: 30upx;
		margin-top: 6upx;
	}
	.privilege-detail-condition .apply-off{
		width: 160upx;
		height: 48upx;
		line-height: 48upx;
		text-align: center;
		border: 1upx solid #666666;
		border-radius: 30upx;
		font-size: 28upx;
		color: #666666;
	}
	.canceled{
		text-align: left;
		margin-top: 54upx;
		color: #666666;
		font-size: 30upx;
	}
</style>
